<!--
 * @Author: nns4
 * @Date: 2020-02-21 10:50:24
 * @LastEditors: nns4
 * @FilePath: /citciWechartShop/src/components/toShopCard/toShopCard.vue
 * @Description: 产品飞入购物车组件
 -->

<template>
  <div>
    <div class="toShopCard">
      <div class="proDetail">
        <slot name="proDetail"></slot>
      </div>
      <div @click="addToCart">
        <slot name="toCarBtn"></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "toShopCard",
  data() {
    return {
      canAddCard: true
    };
  },
  props: {
    proImg: {
      type: String,
      required: true
    }
  },
  mounted() {},
  methods: {
    addToCart() {
      if (!this.canAddCard) {
        return;
      }
      this.canAddCard = false;
      let parents = $(event.target)
        .parents(".toShopCard")
        .find(".proDetail .proImg");
      parents.append(
        `<div class="creatIMGdiv imgs"><img class="creatIMG " width="40" src='${this.proImg}' /></div>`
      );
      let creatIMG = parents.find(".creatIMG");
      let creatIMGdiv = parents.find(".creatIMGdiv")[0];
      let proLEFT = creatIMGdiv.getBoundingClientRect().left;
      let proTOP = creatIMGdiv.getBoundingClientRect().top;
      let carTOP = $("#car .van-tabbar-item__icon").offset().top;
      let carLEFT = $("#car .van-tabbar-item__icon").offset().left - 10;
      creatIMG.addClass("toSmall");
      creatIMGdiv.style.transform = `translate3d(${carLEFT -
        proLEFT}px,${carTOP - proTOP}px , 0)`;

      creatIMGdiv.addEventListener("transitionend", () => {
        creatIMGdiv.remove();
        this.canAddCard = true;
        this.listenInCart();
      });
      // 监听小球动画结束方法
      creatIMGdiv.addEventListener("webkitAnimationEnd", () => {
        this.canAddCard = true;
        creatIMGdiv.remove();
        this.listenInCart();
      });
    },
    listenInCart() {
      // 拿到底部Tabbar购物车的DOM元素添加class
      $("#car").addClass("carmove");
      setTimeout(() => {
        // 500毫秒后移除底部Tabbar购物车的DOM元素class
        $("#car").removeClass("carmove");
      }, 500);
    }
  },beforeRouteEnter(){
    console.log(888)
  }
};
</script>
<style lang="less" scoped>
/deep/ .imgs {
  transition: 0.8s all;
  position: absolute;
  z-index: 8888;
}

@keyframes mymove {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(0.8);
  }
  75% {
    transform: scale(0.7);
  }
  100% {
    transform: scale(0.6);
  }
}
/deep/ .toSmall {
  animation: 0.8s mymove ease-in-out;
}
</style>